<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple" />
          <el-card shadow="always" class="card">
            <div class="main">
              <i class="el-icon-user" />
              <div class="right">
                <p>管理员用户</p>
                <p>{{ indexInfo.admin }} 名</p>
              </div>
            </div>
          </el-card>
          <el-card shadow="always" class="card secondCard">
            <div class="main">
              <i class="el-icon-user" />
              <div class="right">
                <p>教师用户</p>
                <p>{{ indexInfo.teacher }} 名</p>
              </div>
            </div>
          </el-card>

          <el-card class="chart">
            <div ref="chartOne" style=" width: 305px; height:200px" />
          </el-card>

          <el-card class="chart">
            <div ref="chartTwo" style=" width: 305px; height:200px" />
          </el-card>
        </el-col>
        <el-col :span="12"><div class="grid-content bg-purple" />
          <el-card class="chartFive">
            <div ref="chartFive" style=" width: 100%; min-height:460px" />
          </el-card>
          <el-card>
            <div ref="chartSix" style=" width: 100%; min-height:200px" />
          </el-card>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple" />
          <el-card shadow="always" class="card thirdCard">
            <div class="main">
              <i class="el-icon-user" />
              <div class="right">
                <p>学科数量</p>
                <p>{{ indexInfo.subject }} 名</p>
              </div>
            </div>
          </el-card>
          <el-card shadow="always" class="card fourthCard">
            <div class="main">
              <i class="el-icon-user" />
              <div class="right">
                <p>班级数量</p>
                <p>{{ indexInfo.class }} 名</p>
              </div>
            </div>
          </el-card>
          <el-card class="chart">
            <div ref="chartThree" style=" width: 305px; height:200px" />
          </el-card>
          <el-card class="chart">
            <div ref="chartFour" style=" width: 305px; height:200px" />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts' // 引入所有的echarts
import '../../../node_modules/echarts/map'
import { getIndexInfo } from '@/api/dashindex'
export default {
  name: 'Dashboard',
  data() {
    return {
      indexInfo: [],
      arr: []
    }
  },
  mounted() {
    this.chartOne = echarts.init(this.$refs.chartOne)
    this.chartTwo = echarts.init(this.$refs.chartTwo)
    this.chartThree = echarts.init(this.$refs.chartThree)
    this.chartFour = echarts.init(this.$refs.chartFour)
    this.chartFive = echarts.init(this.$refs.chartFive)
    this.chartSix = echarts.init(this.$refs.chartSix)
  },
  created() {
    this.getIndex()
    this.getChartOne()
    this.getChartTwo()
    this.getChartThree()
    this.getChartFour()
    this.getChartFive()
    this.getChartSix()
  },
  methods: {
    async getIndex() {
      const res = await getIndexInfo()
      console.log(res)
      this.indexInfo = res.data.data.list
      this.arr = res.data.data
      console.log(this.arr)
    },
    getChartOne() {
      setTimeout(() => {
        this.chartOne.setOption(
          {
            angleAxis: {},
            radiusAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu'],
              z: 10
            },
            polar: {},
            series: [
              {
                type: 'bar',
                data: this.arr.oneInfo.A,
                coordinateSystem: 'polar',
                stack: 'a',
                emphasis: {
                  focus: 'series'
                }
              },
              {
                type: 'bar',
                data: this.arr.oneInfo.B,
                coordinateSystem: 'polar',
                stack: 'a',
                emphasis: {
                  focus: 'series'
                }
              },
              {
                type: 'bar',
                data: this.arr.oneInfo.C,
                coordinateSystem: 'polar',
                stack: 'a',
                emphasis: {
                  focus: 'series'
                }
              }
            ],
            legend: {
              show: true,
              data: ['A', 'B', 'C']
            }
          }
        )
      }, 200)
    },
    getChartTwo() {
      const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
      setTimeout(() => {
        this.chartTwo.setOption(
          {
            backgroundColor: '#fff',
            title: {
              textStyle: {
                fontSize: 12,
                fontWeight: 400
              },
              left: 'center',
              top: '5%'
            },
            legend: {
              icon: 'circle',
              top: '1%',
              right: '5%',
              itemWidth: 5,
              itemGap: 18,
              textStyle: {
                color: '#556677'
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                label: {
                  show: true,
                  backgroundColor: '#fff',
                  color: '#556677',
                  borderColor: 'rgba(0,0,0,0)',
                  shadowColor: 'rgba(0,0,0,0)',
                  shadowOffsetY: 0
                },
                lineStyle: {
                  width: 0
                }
              },
              backgroundColor: '#fff',
              textStyle: {
                color: '#5c6c7c'
              },
              padding: [10, 10],
              extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
            },
            grid: {
              top: '15%',
              right: '15%'
            },
            xAxis: [{
              type: 'category',
              data: ['北京', '上海', '广州', '深圳', '香港', '澳门'],
              axisLine: {
                lineStyle: {
                  color: '#DCE2E8'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: '#556677'
                },
                // 默认x轴字体大小
                fontSize: 12,
                // margin:文字到x轴的距离
                margin: 15
              },
              axisPointer: {
                label: {
                // padding: [11, 5, 7],
                  padding: [0, 0, 10, 0],
                  /*

                */
                  // 这里的margin和axisLabel的margin要一致!
                  margin: 15,
                  // 移入时的字体大小
                  fontSize: 12,
                  backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#fff' // 0% 处的颜色
                    }, {
                      // offset: 0.9,
                      offset: 0.86,
                      /*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）

                        */
                      color: '#fff' // 0% 处的颜色
                    }, {
                      offset: 0.86,
                      color: '#33c0cd' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#33c0cd' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              },
              boundaryGap: false
            }],
            yAxis: [{
              type: 'value',
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#DCE2E8'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#556677'
                }
              },
              splitLine: {
                show: false
              }
            }, {
              type: 'value',
              position: 'right',
              axisTick: {
                show: false
              },
              axisLabel: {
                textStyle: {
                  color: '#556677'
                },
                formatter: '{value}'
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#DCE2E8'
                }
              },
              splitLine: {
                show: false
              }
            }],
            series: [{
              name: 'teacher',
              type: 'line',
              data: this.arr.twoInfo.Adidas,
              symbolSize: 1,
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#9effff'
                },
                {
                  offset: 1,
                  color: '#9E87FF'
                }
                ]),
                shadowColor: 'rgba(158,135,255, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
              },
              itemStyle: {
                normal: {
                  color: colorList[0],
                  borderColor: colorList[0]
                }
              }
            }, {
              name: 'zj',
              type: 'line',
              data: this.arr.twoInfo.Nike,
              symbolSize: 1,
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                  offset: 0,
                  color: '#73DD39'
                },
                {
                  offset: 1,
                  color: '#73DDFF'
                }
                ]),
                shadowColor: 'rgba(115,221,255, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
              },
              itemStyle: {
                normal: {
                  color: colorList[1],
                  borderColor: colorList[1]
                }
              }
            },
            {
              name: 'host',
              type: 'line',
              data: this.arr.twoInfo.beijing,
              symbolSize: 1,
              yAxisIndex: 1,
              symbol: 'circle',
              smooth: true,
              showSymbol: false,
              lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: '#fe9a'
                },
                {
                  offset: 1,
                  color: '#fe9a8b'
                }
                ]),
                shadowColor: 'rgba(254,154,139, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
              },
              itemStyle: {
                normal: {
                  color: colorList[2],
                  borderColor: colorList[2]
                }
              }
            }
            ]
          }
        )
      }, 200)
    },
    getChartThree() {
      setTimeout(() => {
        this.chartThree.setOption(
          {
            // title: {
            //   text: 'Stacked Line'
            // },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['学生', '老师', '助教', '班主任']
            },
            grid: {
              left: '3%',
              right: '10%',
              bottom: '3%',
              containLabel: true
            },
            // toolbox: {
            //   feature: {
            //     saveAsImage: {}
            //   }
            // },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '学生',
                type: 'line',
                stack: 'Total',
                data: this.arr.threeInfo.Direct
              },
              {
                name: '老师',
                type: 'line',
                stack: 'Total',
                data: this.arr.threeInfo.Email
              },
              {
                name: '助教',
                type: 'line',
                stack: 'Total',
                data: this.arr.threeInfo.Search
              },
              {
                name: '班主任',
                type: 'line',
                stack: 'Total',
                data: this.arr.threeInfo.Union
              }
            ]
          }
        )
      }, 200)
    },
    getChartFour() {
      setTimeout(() => {
        this.chartFour.setOption(
          {
            title: {
              text: 'Class Population'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '8%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: 'category',
              data: ['Shanghai', 'Beijing', 'Shenzhen', 'Guangdong', 'Hefei', 'Wuhan']
            },
            series: [
              {
                type: 'bar',
                data: this.arr.fourInfo.buttom
              },
              {
                type: 'bar',
                data: this.arr.fourInfo.top
              }
            ]
          }
        )
      }, 200)
    },
    getChartFive() {
      var geoCoordMap = {
        上海: [121.4648, 31.2891],
        尼日利亚: [-4.388361, 11.186148],
        美国洛杉矶: [-118.24311, 34.052713],
        香港邦泰: [114.195466, 22.282751],
        美国芝加哥: [-87.801833, 41.870975],
        加纳库马西: [-4.62829, 7.72415],
        英国曼彻斯特: [-1.657222, 51.886863],
        德国汉堡: [10.01959, 54.38474],
        哈萨克斯坦阿拉木图: [45.326912, 41.101891],
        俄罗斯伊尔库茨克: [89.116876, 67.757906],
        巴西: [-48.678945, -10.493623],
        埃及达米埃塔: [31.815593, 31.418032],
        西班牙巴塞罗纳: [2.175129, 41.385064],
        柬埔寨金边: [104.88659, 11.545469],
        意大利米兰: [9.189948, 45.46623],
        乌拉圭蒙得维的亚: [-56.162231, -34.901113],
        莫桑比克马普托: [32.608571, -25.893473],
        阿尔及利亚阿尔及尔: [3.054275, 36.753027],
        阿联酋迪拜: [55.269441, 25.204514],
        匈牙利布达佩斯: [17.108519, 48.179162],
        澳大利亚悉尼: [150.993137, -33.675509],
        美国加州: [-121.910642, 41.38028],
        澳大利亚墨尔本: [144.999416, -37.781726],
        墨西哥: [-99.094092, 19.365711],
        加拿大温哥华: [-123.023921, 49.311753]
      }
      var BJData = [
        [{
          name: '尼日利亚',
          value: 9100
        }, {
          name: '香港邦泰'
        }],
        [{
          name: '美国洛杉矶',
          value: 2370
        }, {
          name: '香港邦泰'
        }],
        [{
          name: '香港邦泰',
          value: 3130
        }, {
          name: '香港邦泰'
        }],
        [{
          name: '美国芝加哥',
          value: 2350
        }, {
          name: '香港邦泰'
        }],
        [{
          name: '加纳库马西',
          value: 5120
        }, {
          name: '香港邦泰'
        }],
        [{
          name: '英国曼彻斯特',
          value: 3110
        }, {
          name: '香港邦泰'
        }],
        [{
          name: '德国汉堡',
          value: 6280
        }, {
          name: '上海'
        }],
        [{
          name: '哈萨克斯坦阿拉木图',
          value: 7255
        }, {
          name: '上海'
        }],
        [{
          name: '俄罗斯伊尔库茨克',
          value: 8125
        }, {
          name: '上海'
        }],
        [{
          name: '巴西',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '埃及达米埃塔',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '西班牙巴塞罗纳',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '柬埔寨金边',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '意大利米兰',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '乌拉圭蒙得维的亚',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '莫桑比克马普托',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '阿尔及利亚阿尔及尔',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '阿联酋迪拜',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '匈牙利布达佩斯',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '澳大利亚悉尼',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '美国加州',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '澳大利亚墨尔本',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '墨西哥',
          value: 3590
        }, {
          name: '上海'
        }],
        [{
          name: '加拿大温哥华',
          value: 3590
        }, {
          name: '上海'
        }]
      ]
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          var fromCoord = geoCoordMap[dataItem[0].name]
          var toCoord = geoCoordMap[dataItem[1].name]
          if (fromCoord && toCoord) {
            res.push([{
              coord: fromCoord,
              value: dataItem[0].value
            },
            {
              coord: toCoord
            }
            ])
          }
        }
        return res
      }
      var series = [];
      [
        ['上海', BJData]
      ].forEach(function(item, i) {
        series.push({
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 8, // 箭头指向速度，值越小速度越快
            trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', // 箭头图标
            symbolSize: 3 // 图标大小
          },
          lineStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#58B3CC'
              }, {
                offset: 1,
                color: '#F58158'
              }], false),
              width: 1,
              opacity: 0.03,
              curveness: 0.1
            }
          },

          data: convertData(item[1])
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            // 涟漪特效
            period: 4, // 动画时间，值越小速度越快
            brushType: 'stroke', // 波纹绘制方式 stroke, fill
            scale: 4 // 波纹圆环最大限制，值越大波纹越大
          },
          label: {
            normal: {
              show: true,
              position: 'right', // 显示位置
              offset: [5, 0], // 偏移设置
              formatter: '{b}' // 圆环显示文字
            },
            emphasis: {
              show: true
            }
          },
          symbol: 'circle',
          symbolSize: function(val) {
            return 4 + val[2] / 1000 // 圆环大小
          },
          itemStyle: {
            normal: {
              show: false
            }
          },
          data: item[1].map(function(dataItem) {
            return {
              name: dataItem[0].name,
              value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
            }
          })
        },
        // 被攻击点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              color: '#00ffff',
              formatter: '{b}',
              textStyle: {
                color: '#0bc7f3'
              }
            },
            emphasis: {
              show: true
            }
          },
          symbol: 'pin',
          symbolSize: 30,
          itemStyle: {
            normal: {
              show: true,
              color: '#9966cc'
            }
          },
          data: [{
            name: item[0],
            value: geoCoordMap[item[0]].concat([100])
          }]
        }
        )
      })
      setTimeout(() => {
        this.chartFive.setOption(
          {
            backgroundColor: '#000',
            title: {
              text: '师生位置分布',
              left: 'center',
              textStyle: {
                color: '#fff'
              }
            },
            tooltip: {
              trigger: 'item',
              backgroundColor: '#1540a1',
              borderColor: '#FFFFCC',
              showDelay: 0,
              hideDelay: 0,
              enterable: true,
              transitionDuration: 0,
              extraCssText: 'z-index:100',
              formatter: function(params, ticket, callback) {
                // 根据业务自己拓展要显示的内容
                var res = ''
                var name = params.name
                var value = params.value[params.seriesIndex + 1]
                res =
                "<span style='color:#fff;'>" +
                name +
                '</span><br/>数据：' +
                value
                return res
              }
            },
            visualMap: {
              // 图例值控制
              min: 0,
              max: 10000,
              show: false,
              calculable: true,
              color: ['#0bc7f3'],
              textStyle: {
                color: '#fff'
              }

            },
            geo: {
              map: 'world',
              label: {
                emphasis: {
                  show: false
                }
              },
              roam: true, // 是否允许缩放
              layoutCenter: ['50%', '50%'], // 地图位置
              layoutSize: '180%',
              itemStyle: {
                normal: {
                  areaColor: '#323c48',
                  borderColor: '#8F98A6'
                },
                emphasis: {
                  areaColor: '#2a333d'
                }
              }
            },

            series: series
          }
        )
      }, 200)
    },
    getChartSix() {
      setTimeout(() => {
        this.chartSix.setOption(
          {
            backgroundColor: '#05224d',
            tooltip: {},
            grid: {
              top: '8%',
              left: '1%',
              right: '1%',
              bottom: '8%',
              containLabel: true
            },
            legend: {
              itemGap: 50,
              data: ['缴费总人数', '最新缴费人数'],
              textStyle: {
                color: '#f9f9f9',
                borderColor: '#fff'
              }
            },
            xAxis: [{
              type: 'category',
              boundaryGap: true,
              axisLine: { // 坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                  color: '#f9f9f9'
                }
              },
              axisLabel: { // 坐标轴刻度标签的相关设置
                textStyle: {
                  color: '#d1e6eb',
                  margin: 15
                }
              },
              axisTick: {
                show: false
              },
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
            }],
            yAxis: [{
              type: 'value',
              min: 0,
              // max: 140,
              splitNumber: 7,
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#0a3256'
                }
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                margin: 20,
                textStyle: {
                  color: '#d1e6eb'

                }
              },
              axisTick: {
                show: false
              }
            }],
            series: [{
              name: '注册总量',
              type: 'line',
              // smooth: true, //是否平滑曲线显示
              // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbol: 'emptyCircle',
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: '#28ffb3' // 线条颜色
                },
                borderColor: '#f0f'
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              },
              itemStyle: {
                normal: {
                  color: '#28ffb3'

                }
              },
              tooltip: {
                show: false
              },
              areaStyle: { // 区域填充样式
                normal: {
                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,154,120,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,0,0, 0)'
                  }
                  ], false),
                  shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
                  shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                }
              },
              data: this.arr.sixInfo.all
            }, {
              name: '最新注册量',
              type: 'bar',
              barWidth: 20,
              tooltip: {
                show: false
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              },
              itemStyle: {
                normal: {
                  color: function(params) {
                    var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1']
                    return colorList[params.dataIndex]
                  }
                }
              },
              data: this.arr.sixInfo.new
            }]
          }
        )
      }, 200)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.card {
  text-align: center;
    background-color: #F56C6C;
    margin-bottom: 10px;
}
.secondCard {
  background-color: #2a75d6;
}
.main {
  display: flex;
  align-items: center;
  color: #fff;
}
.right {
  margin-left: 40px;
  font-size: 16px;
}
.el-icon-user {
  margin-left: 40px;
  font-size: 35px;
}
::v-deep .el-card__body {
padding: 10px;
}
.dashboard-text{
  line-height: 25px;
}
.thirdCard {
  background-color: #67C23A;
}
.fourthCard {
  background-color: #409EFF;
}
.chart {
  width: 305px;
  min-height:200px;
  margin-bottom: 10px;
}
.chartFive{
  margin-bottom: 10px;
}
</style>
